import { useAppStore } from '@/store/modules/app'
import { onMounted } from 'vue';
import { reactive } from 'vue';

export default defineComponent({
  name: 'Setting',
  setup() {
    const appStore = useAppStore();


    const themeChange = (checked) => {
      appStore.setDark(checked);
    }

    const waterRef = ref(null);

    onMounted(() => {
      //setWatermark('这是一个水印');
    })

    const forData = reactive({
      darkVal: appStore.dark,
      waterVal: false,
      colorVal: '#0f0f0f'
    })

    const handleSubmit = (data) => {
      console.log(data);
    }

    return () => (
      <page-wrapper ref="waterRef">
        <a-form model={forData} style={{ width: '600px' }} onsubmit={handleSubmit}>
          <a-form-item field="name" label="暗色主题">
            <a-switch v-model={forData.darkVal} onChange={themeChange} v-slots={{
              'checked-icon': () => <icon icon="ph:moon-light" />,
              'unchecked-icon': () => <icon icon="ph:sun" />
            }}>
            </a-switch>
          </a-form-item>
          <a-form-item field="name"  label="主题色">
            <color-picker v-model={forData.colorVal} position="lt">
            </color-picker>
          </a-form-item>
        </a-form>
      </page-wrapper>
    );
  },
});
